import { getEnvConfig, isDevelopment } from '@/utils/env';

export const EnvInfo = () => {
  const config = getEnvConfig();

  // 只在开发环境显示
  if (!isDevelopment()) {
    return null;
  }

  return (
    <div className="fixed bottom-4 right-4 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 px-3 py-2 rounded-lg text-xs font-mono shadow-lg z-50">
      <div className="flex items-center space-x-2">
        <div className={`w-2 h-2 rounded-full ${
          config.isDevelopment ? 'bg-green-500' :
          config.isTest ? 'bg-yellow-500' :
          config.isPre ? 'bg-orange-500' :
          'bg-red-500'
        }`}></div>
        <span>{config.env.toUpperCase()}</span>
        <span className="text-gray-500">v{config.appVersion}</span>
      </div>
    </div>
  );
};
